/*
 * @Author: jiu yin
 * @Date: 2024-05-07 15:16:59
 * @LastEditTime: 2024-05-21 17:51:34
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\scene_member_code\component\EditScene.tsx
 * jiu
 */
import { edit_studio_program, studio_scene_list } from "@/api/home";
import Modal_edit from "@/comment/modal_edit";
import { useRoute } from "@/hooks";
import { Image, message } from "antd";
import { useEffect, useState } from "react";
import "./index.scss";

export default function add_edit(props: any) {
	let {  isModalOpen, edit_data={},EditSceneFn } = props;
	const { push } = useRoute();
	console.log(edit_data);


	//场景列表
	let [scene_list, set_scene_list] = useState([] as any);

	useEffect(() => {
		studio_scene_list({ page: 1, limit: 100 }).then((res: any) => {
			set_scene_list(res.data.data);
		});
	}, []);


	let [data, set_data] = useState(edit_data);

	const scene_fn = (id: number) => {
		set_data({ ...data, scene_id: id });
	};


	const handleOk = async () => {
	 await edit_studio_program(data);
		message.success("编辑场景成功");
		isModalOpen[1](false)
      EditSceneFn()
	};
	return (
		<div>
			<Modal_edit
				title={"编辑场景方案"}
				isModalOpen={isModalOpen}
				width={1000}
				handleOk={handleOk}>
				<div>
					<h3>选择场景</h3>
					<ul className="mt-50px grid grid-cols-4 gap-16px ">
						{scene_list.map((item: any, index: number) => (
							<li
								className={`font-700 scene_list_hover ${data.scene_id == item.scene_id && "scene_list_active"}`}
								key={index}
								onClick={() => scene_fn(item.scene_id)}>
								<Image width={180} style={{ borderRadius: "20px" }} src={item.cover_url} />
								<div className="ml-50px cursor-pointer w-100%">
									<p className="text-24px c-#08080D mt-10px">{item.scene_name}</p>
									<p className="c-#333333">最大成员：{item.max_num}人</p>
									<p className="c-#333333">时长：{item.exp_duration}min</p>
								</div>
							</li>
						))}
					</ul>
				</div>
			</Modal_edit>
		</div>
	);
}
